<template>
  <div>
    <!--面包屑-->
    <bread :bread="$route.meta.bread" />
    <!--页面-->
    <el-card>
      <el-button type="primary" @click="dialogFormVisible = true">添加角色</el-button>
      <el-table :data="tableData" border="" style="width: 100%">
        <el-table-column type="expand">
          <!--页面二级-->
          <template slot-scope="propss">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-table
                :data="propss.row.children"
                border
                style="width: 100%"
                :show-header="false"
              >
                <el-table-column prop="id" label="ID" width="140">
                  <template slot-scope="props">
                    <el-tag closable @close="rmTagRoles(propss.row.id, props.row.id)">
                      {{ props.row.authName }}
                    </el-tag>
                    <i class="el-icon-caret-right"></i>
                  </template>
                </el-table-column>
                <el-table-column label="ID">
                  <template slot-scope="props">
                    <el-table
                      :data="props.row.children"
                      border
                      style="width: 100%"
                      :show-header="false"
                    >
                      <el-table-column>
                        <template slot-scope="props">
                          <el-tag
                            closable
                            type="success"
                            @close="rmTagRoles(propss.row.id, props.row.id)"
                          >
                            {{ props.row.authName }}
                          </el-tag>
                          <i class="el-icon-caret-right"></i>
                          <span v-for="(item, index) in props.row.children" :key="index">
                            <el-tag
                              closable
                              type="warning"
                              @close="rmTagRoles(propss.row.id, item.id)"
                            >
                              {{ item.authName }}
                            </el-tag>
                          </span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="#" prop="id" width="80"> </el-table-column>
        <el-table-column label="角色名称" prop="roleName"> </el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"> </el-table-column>
        <el-table-column label="操作" prop="desc">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="backfill(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="remove(scope.row)"
              >删除</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-star-off"
              size="small"
              @click="aflag = true"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--添加-->
      <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="form.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="form.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addlist()">确 定</el-button>
        </div>
      </el-dialog>
      <!--编辑-->
      <el-dialog title="修改角色" :visible.sync="eflag">
        <el-form :model="backfilllist" :rules="rules" ref="form">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="backfilllist.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="backfilllist.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="eflag = false">取 消</el-button>
          <el-button type="primary" @click="modification(backfilllist)">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
    <!--分配权限-->
    <el-dialog title="分配权限" :visible.sync="aflag">
      <el-tree
        :data="lcqxlist"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :props="{
          id: 'id',
          label: 'authName',
          children: 'children',
        }"
      >
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="aflag = false">取 消</el-button>
        <el-button type="primary" @click="aflag = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bread from "./../bread";
export default {
  components: { bread },
  name: "",
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1",
              },
            ],
          },
        ],
      },
    ];
    return {
      tableData: [],
      backfilllist: {},
      lcqxlist: [], //权限
      form: {
        roleName: "",
        roleDesc: "",
      },
      dialogFormVisible: false,
      eflag: false,
      aflag: false,
      rules: {
        roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        roleDesc: [{ required: true, message: "请输入角色描述", trigger: "blur" }],
      },
      //权限
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),
    };
  },
  mounted() {
    this.lcgetlist();
    this.getroles();
  },
  methods: {
    //获取页面数据
    async lcgetlist() {
      let { data: res } = await this.$axios.get("roles");
      // console.log(res);
      this.tableData = res;
    },
    //获取权限
    async getroles() {
      let { data: res } = await this.$axios.get(`rights/tree`);
      console.log(res);
      this.lcqxlist = res;
    },

    //添加数据
    async addlist() {
      let { data: res } = await this.$axios.post(`roles`, this.form);
      // console.log(res);
      this.$message.success("添加成功");
      this.lcgetlist(); //刷新列表
      this.dialogFormVisible = false; //弹框隐藏
    },
    //数据回填
    backfill(obj) {
      this.backfilllist = obj;
      this.eflag = true;
    },
    //编辑
    async modification(backfilllist) {
      let { data: res } = await this.$axios.put(
        `roles/${this.backfilllist.id}`,
        this.backfilllist
      );
      console.log(res);
      this.$message.success("修改成功");
      this.lcgetlist(); //刷新列表
      this.eflag = false; //弹框隐藏
    },
    //删除
    async remove(obj) {
      let { data: res } = await this.$axios.delete(`roles/${obj.id}`);
      // console.log(res);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.lcgetlist(); //刷新列表
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改权限
    rmTagRoles(roleId, rightId) {
      this.$confirm("此操作将取消权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios.delete(`roles/${roleId}/rights/${rightId}`).then((res) => {
          this.$message("取消成功");
          this.lcgetlist(); //刷新列表
        });
        let obj = this.lcqxlist.filter((ele) => ele.id == roleId)[0].children;
        obj.forEach((ele, in1) => {
          if (ele.id == rightId) {
            obj.splice(
              obj.findIndex((ele) => ele.id == rightId),
              1
            );
          } else {
            ele.children.forEach((ele, in2) => {
              if (ele.id == rightId) {
                obj[in1].children.splice(
                  obj[in1].children.findIndex((ele) => ele.id == rightId),
                  1
                );
              } else {
                ele.children.forEach((ele) => {
                  if (ele.id == rightId) {
                    obj[in1].children[in2].children.splice(
                      obj[in1].children[in2].children.findIndex(
                        (ele) => ele.id == rightId
                      ),
                      1
                    );
                  }
                });
              }
            });
          }
        });
      });
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.el-table {
  margin: 15px 0px;
}
.el-form-item {
  .el-input {
    width: 85%;
  }
}
.el-table--enable-row-transition {
  margin: 0;
  padding: 0;
}
</style>
